// 权限控制
// 1.路由调转权限控制
// 2.菜单权限控制
// console.log(1111)

import router from './router'
import { getToken } from '@/utils/auth'
import store from '@/store'
import { asyncRoutes } from '@/router/asyncRoutes'
// 引入进度条
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
// 创建一个白名单
const WHITE_LIST = ['/login', '/404']

router.beforeEach(async(to, from, next) => {
  // to 到哪里去 目标路由对象
// rom 从哪里来 来源路由对象
// next：旅行函数 [在分支中都应该有切只有一个next]
  // 开启进度条
  NProgress.start()
  // 获取token
  const token = getToken()
  // 判断是否有token
  if (token) {
    if (to.path === '/login') {
      next('/')
    } else {
      next()
      // 调用action函数 这个位置哦 !!!!!
      if (!store.state.user.userinfo.userId) {
        const res = await store.dispatch('user/getUserinfo')
        console.log('action内部传出的数据为', res)
        // 做过滤处理
        const menus = res.menus
        console.log(menus)
        // 如果路由的name属性能在menus权限数据中找到代表可以访问
        const filterRoutes = asyncRoutes.filter(route => menus.includes(route.children[0].name))
        console.log(filterRoutes)
        router.addRoutes(filterRoutes)
        // 4. 把filterRoutes显示到左侧的菜单中
        // 实现思路: 之前渲染左侧菜单时使用的数据是静态的 是永远不变的 哪怕我们把新的动态路由
        // 加入到了路由系统中 它也不会自动变化
        // 让渲染左侧菜单的路由变成可变的？ -> 什么东西是响应式的呢？ data computed vuex
        // 结论：我们需要单独通过vuex维护我们左侧菜单的数据
        store.commit('menu/setMenuList', filterRoutes)
      }
    }
  } else {
    // 判断topath是否属白名单里的 属于方形 不属于 跳转到登录页
    if (WHITE_LIST.includes(to.path)) {
      next()
    } else {
      next('/login')
    }
  }
  // 结束进度条
  NProgress.done()
})
